<template>
    <el-main>
        <el-card shadow="never">
            <el-tabs tab-position="top" v-model="tabName" @tab-click="handleClick">
                <el-tab-pane label="系统配置" name="sys">
                    <el-form
                        ref="form"
                        :model="formData"
                        label-width="100px"
                        style="margin-top: 20px"
                    >
                        <el-form-item label="系统名称">
                            <el-input v-model="formData.sysName"></el-input>
                        </el-form-item>
                        <el-form-item label="系统版本">
                            <el-input v-model="formData.sysVersion"></el-input>
                        </el-form-item>
                        <el-form-item label="系统标语">
                            <el-input v-model="formData.sysSlogan"></el-input>
                        </el-form-item>
                        <el-form-item label="系统描述">
                            <el-input v-model="formData.sysDescribe"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码模式">
                            <el-radio-group v-model="formData.sysCaptchaType">
                                <el-radio value="1" size="large">输入验证码</el-radio>
                                <el-radio value="2" size="large">点选验证码</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-main>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import setting from '@/api/modules/setting.ts'
import feedback from '@/utils/feedback.ts'

defineOptions({ name: '系统配置' })

const tabName = ref<string | number | undefined>('sys')
const formData = reactive({
    sysName: '',
    sysVersion: '',
    sysSlogan: '',
    sysDescribe: '',
    sysCaptchaType: '1'
})

onMounted(async () => {
    await list('sys')
})

function handleClick(tab: TabsPaneContext) {
    tabName.value = tab.paneName
    list(tabName.value)
}

async function list(groupName: string | number | undefined) {
    const res = await setting.config.list.get({ groupName: groupName })
    Object.assign(formData, res)
}

async function submit() {
    await feedback.confirm('确认提交？')
    await setting.config.edit.post({ groupName: tabName.value, data: formData })
}
</script>

<style></style>
